<template>
    <div>
        <div class="goods">
      <img class="img-back" :src="detailData.goodsLogo" alt=""  />
      <div class="title">
        <p>{{detailData.goodsName}}</p>
      </div>
      <div class="price">
        <span>￥{{detailData.goodsPrice}}</span>
        <del>{{detailData.goodsOldPrice}}</del>
      </div>
      <div class="xiaoliang">
          <span>销量{{detailData.goodsBuyNum}}</span>
          <span>收藏{{detailData.goodsFav}}</span>
          <span>{{detailData.goodsAre}}</span>
      </div>
      <div class="kinds">
        <ul>
          <li>
            <img src="@/assets/images/detail/gou.png" alt="" /><span
              >延误必赔</span
            >
          </li>
          <li>
            <img src="@/assets/images/detail/gou.png" alt="" /><span
              >退货补运费</span
            >
          </li>
          <li>
            <img src="@/assets/images/detail/gou.png" alt="" /><span
              >全国包邮</span
            >
          </li>
          <li>
            <img src="@/assets/images/detail/gou.png" alt="" /><span
              >七天无理由退货</span
            >
          </li>
        </ul>
      </div>
    </div>
    </div>
</template>

<script>
export default {
    data () {
        return {

 
        }
    },
    props:['detailData']
}
</script>
 
<style lang = "less" scoped>
    .goods{
    width: 100%;
      border-bottom:3px solid rgb(229, 226, 226);
  .img-back{
    background: palegoldenrod;
    width:100%;
     height:70vw;
  }
    .title{
        margin: 6% 2%;
    }
    .price{
       margin: 0 2%;
        del{
            font-size: 3vw;
            color: rgb(180, 177, 177);
            text-decoration: line-through;
            margin-left: 1%;
        }
        span{
          font-weight: bolder;
          color: red;
          font-size: 5vw;
        }
    }
    .xiaoliang{
      
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 5% 2%;
      padding-bottom: 4.5%;
      border-bottom: 1px solid rgb(229, 226, 226);
      span{
        display: block;
        color: #999999;
        font-size: 3vw;
      }
    }
    .kinds{
      margin: 0 2%;
      padding-bottom: 4.5%;
       ul{
        display: flex;
        justify-content: space-between;
        img{
            width: 2.6vw;
            height: 2.6vw;
        }
        span{
            font-size: 2.6vw ;
        }
       }
    }

}
</style>